<template>
<div class="searchTables" style="display: flex; width: 30%; margin-bottom: 10px;">
    <a-button type="primary" size="large" style="margin-right: 20px;" @click="showAddOrUpdateModal(true,null)">新增</a-button>
    <a-input-search v-model:value="inputValue" placeholder="输入产品名" enter-button="搜索" size="large" @search="onSearch" />
</div>
<a-modal v-model:visible="visibleAdd" title="新增产品" ok-text="确认" cancel-text="取消" @ok="hideAddOrUpdateModal">
    <a-form :model="formState" @finish="onFinish" ref="formRef">
        <a-form-item name="pName" label="产品名&nbsp;&nbsp;&nbsp;" :rules="[{ required: true, message: '请输入产品名!' ,trigger: 'blur'}] ">
            <a-input v-model:value="formState.pName" />
        </a-form-item>
        <a-form-item name="type" label="类型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" :rules="[{ required: true, message: '请输入类型!' ,trigger: 'blur'}]">
            <a-input v-model:value="formState.type" />
        </a-form-item>
        <a-form-item name="address" label="当前位置" :rules="[{ required: true, message: '请输入当前位置!',trigger: 'blur' }]">
            <a-input v-model:value="formState.address" :disabled="!this.clickAdd" />
        </a-form-item>
        <a-form-item name="source" label="产地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" :rules="[{ required: true, message: '请输入产地!',trigger: 'blur' }]">
            <a-input v-model:value="formState.source" />
        </a-form-item>
        <a-form-item name="lot" label="批号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" :rules="[{ required: true, message: '请输入批号!' ,trigger: 'blur'}]">
            <a-input v-model:value="formState.lot" />
        </a-form-item>
        <a-form-item name="Time" label="到期时间">
            <a-date-picker show-time placeholder="Select Time" @change="dateChange" @ok="onOk" />
        </a-form-item>
    </a-form>
</a-modal>
<div class="table">
    <a-table :columns="columns" :data-source="data" @resizeColumn="handleResizeColumn">
        <template #headerCell="{ column }">
            <template v-if="column.key === 'pName'">
                <span>
                    <smile-outlined />
                    产品名
                </span>
            </template>
        </template>

        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'pName'">
                <router-link :to="'/productDetails/'+record.puid">
                    {{ record.pname }}
                </router-link>
            </template>
            <template v-else-if="column.key === 'type'">
                <span>
                    <a-tag :key="record.type" :color=" 'cyan' ">
                        {{ record.type }}
                    </a-tag>
                </span>
            </template>
            <template v-else-if="column.key === 'action'">
                <span>
                    <a-button type="primary" @click="showAddOrUpdateModal(false,record)">编辑</a-button>
                    <a-divider type="vertical" />
                    <a-button type="primary" style="background-color:coral;border-color: coral;" @click="showModal(record)">生成二维码</a-button>
                    <a-divider type="vertical" />
                    <a-button type="primary" danger @click="deleteData(record.puid)">删除</a-button>
                </span>

            </template>
        </template>
    </a-table>
    <a-modal v-model:visible="visible" :title="clickRow">
        <template #footer>
            <a-button key="back" @click="downloadImg(qrcode,this.clickRow)" danger>下载</a-button>
            <a-button key="submit" type="primary" :loading="loading" @click="closeModel">关闭</a-button>
        </template>
        <a-row type="flex" justify="space-around" align="middle">
            <a-image :src="qrcode"></a-image>
        </a-row>

    </a-modal>
</div>
</template>

<script>
import {
    SmileOutlined,
    DownOutlined,
} from '@ant-design/icons-vue';
import {
    message
} from 'ant-design-vue';
import saveImag from '@/utils/DownloadImg'
import API from '@/config/axiosInstance'
import {
    defineComponent,
    ref,
} from 'vue';
const data = ref([{
    puid: '',
    pname: '',
    type: "",
    address: '',
    source: '',
    lot: '',
    exp: ''
}]);
export default defineComponent({
    inject: ["reload"],
    components: {
        SmileOutlined,
        DownOutlined,
    },
    setup() {
        const formState = ref({
            puid: '',
            pName: '',
            type: "",
            address: '',
            source: '',
            lot: '',
            exp: ''
        })
        const item = ref({
            puid: '',
            pName: '',
            type: "",
            address: '',
            source: '',
            lot: '',
            exp: ''
        });
        const columns = ref([{
                dataIndex: '产品名',
                key: 'pName',
                resizable: true,
                width: 200,
                minWidth: 100,
                maxWidth: 200,
            },
            {
                title: '批号',
                dataIndex: 'lot',
                key: 'lot',
            },
            {
                title: '类型',
                dataIndex: 'type',
                key: 'type',
                resizable: true,
                width: 100,
                minWidth: 100,
                maxWidth: 200,
            },
            {
                title: '产地',
                dataIndex: 'source',
                key: 'source',
            },
            {
                title: '当前位置',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '到期时间',
                dataIndex: 'exp',
                key: 'exp',
                defaultSortOrder: 'descend',
                sorter: (a, b) => {
                    const aTime = new Date(a.exp).getTime(); // 需要先转换成时间戳
                    const bTime = new Date(b.exp).getTime();
                    return aTime - bTime;
                },
            },
            {
                title: '操作',
                key: 'action',
            }
        ]);

        const formRef = ref();
        const clickRow = ref("Title");
        const qrcode = ref('')
        const loading = ref(false);
        const visible = ref(false);
        const handleCancel = () => {
            visible = false;
        };
        const onFinish = values => {
            console.log('Received values of form: ', values);
            console.log('formState: ', formState);
        };
        return {
            clickAdd: ref(true),
            item,
            qrcode,
            handleCancel,
            data,
            clickRow,
            visible,
            columns,
            loading,
            formState,
            onFinish,
            formRef,
            visibleAdd: ref(false),
            inputValue: ref(""),
            handleResizeColumn: (w, col) => {
                col.width = w;
            },
        };

    },
    methods: {
        onSearch() {
            this.getData();
        },
        dateChange(value, dateString) {
            //console.log(value)
            console.log(dateString)
            this.formState.exp = dateString
        },
        onOk(value) {
            //console.log(value)
        },
        showModal(record) {
            this.getQRCode(record.puid)
            this.clickRow = record.pname;
            this.visible = true;
        },
        closeModel() {
            this.visible = false;
        },
        showAddOrUpdateModal(isAdd, data) {
            this.clickAdd = isAdd
            this.formState = this.item
            if (isAdd == false) {
                this.formState.puid = data.puid
                this.formState.pName = data.pname
                this.formState.address = data.address
                this.formState.exp = data.exp
                this.formState.lot = data.lot
                this.formState.type = data.type
                this.formState.source = data.source
                console.log(this.formState)
            }
            this.visibleAdd = true
        },
        hideAddOrUpdateModal() {
            const values = null;
            var check = true
            try {
                this.formRef.validateState
            } catch (errorInfo) {
                console.log(errorInfo)
                message.error("请输入必填项")
                check = false
            }
            if (check) {
                this.visibleAdd = false;
                if (this.clickAdd) {
                    console.log("add")
                    this.addData()
                } else {
                    console.log("update")
                    this.updateData()
                }
            }

        },
        downloadImg(imgSrc, name) {
            saveImag(imgSrc, name);
            message.success("下载成功！");
        },
        updateData() {
            API({
                method: 'post',
                url: 'product/update',
                params: this.formState
            }).then(res => {
                message.info(res.data.msg)
                this.reload();
            })
        },
        addData() {
            API({
                method: 'post',
                url: 'product/add',
                params: this.formState
            }).then(res => {
                message.info(res.data.msg)
                this.reload();
            })
        },
        getQRCode(puid) {
            API({
                method: 'get',
                url: 'code/product',
                params: {
                    'puid': puid
                }
            }).then(res => {
                this.qrcode = res.data.info
            })
        },
        getList() {
            API({
                method: 'get',
                url: 'product/lists'
            }).then(res => {
                console.log(res.data.info)
                this.data = res.data.info
            })
        },
        deleteData(puid) {
            API({
                method: 'post',
                url: 'product/delete',
                params: {
                    'puid': puid
                }
            }).then(res => {
                message.info(res.data.msg)
                console.log(res.data.info)
                this.reload();
            })
        },
        getData() {
            API({
                method: 'get',
                url: 'product/getData',
                params: {
                    'pName': this.inputValue
                }
            }).then(res => {
                if (res.data.resCode == '200') {
                    message.success('成功')
                    this.data = res.data.info
                }
            })
        },

    },
    created() {
        this.getList();
    }
});
</script>
